/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, SuffixInput, TextArea, LineColumn, CCell, Table, TableBody, TableRow, TableHead, Cell,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {measurementRender} from "../../common/measure";
import {calcAverageArrObj} from "../../../common/tool";
import {RepLink} from "../../common/base";

const tailZj=<Text css={{"@media print": {fontSize: '0.75rem'} }}>
    注：对于不合格的值才需测量和记录，仅记录有效厚度与设计值之比最小值之处的测量值。
</Text>;
interface ThicknessProps  extends InternalItemProps{
    nomm?: boolean;
}
export const item受力结构=['力面厚1','力面厚2','力面厚3',];
export const itemA受力结构=['力面厚设','力面厚v','力面厚r','力面备注',];
export const Thickness =
    React.forwardRef((
        {children, show, alone = true, refWidth,label,nomm}: ThicknessProps, ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(item受力结构, itemA受力结构, );        //hook死循环：改成外部定义callbackFilt  输入变量defaultV可变的。
        const {inp, setInp} = useItemInputControl({ ref });
        const aveThick=calcAverageArrObj([inp?.力面厚1o,inp?.力面厚2o,inp?.力面厚3o],(row)=>row,2);
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label!}>
                <Text variant="h5">{label}</Text>
                序号1，主要受力结构件断面有效厚度，设计值（    ）mm：
                <LineColumn column={2} >
                    <InputLine  label='受力结构件断面有效厚度，设计值：' >
                        <SuffixInput  value={inp?.力面厚设 ||''} onSave={txt=> setInp({...inp,力面厚设: txt || undefined })}>mm</SuffixInput>
                    </InputLine>
                    { measurementRender(`该有效厚度观测值-1次`,'力面厚1','mm',inp,setInp,true) }
                    { measurementRender('该有效厚度观测值-2次','力面厚2','mm',inp,setInp,true) }
                    { measurementRender('该有效厚度观测值-3次','力面厚3','mm',inp,setInp,true) }
                    <InputLine  label='主要受力结构件断面有效厚度平均值：'>
                        <Text>{aveThick} mm</Text>
                    </InputLine>
                    <InputLine  label='主要受力结构件断面有效厚度-结果值：' >
                        <SuffixInput  value={inp?.力面厚v ||''} onSave={txt=> setInp({...inp,力面厚v: txt || undefined })}>mm</SuffixInput>
                    </InputLine>
                    <InputLine label={`C3.7.3 检验结果`}>
                        <SelectHookfork value={ inp?.力面厚r ||''}
                                        onChange={e => setInp({ ...inp, 力面厚r: e.currentTarget.value||undefined}) }/>
                    </InputLine>
                </LineColumn>
                {!nomm && <>
                    备注：
                    <TextArea  value={inp?.力面备注 ||''} rows={3}
                               onChange={e => setInp({ ...inp, 力面备注: e.currentTarget.value||undefined}) } />
                </>
                }
                { children ? children : tailZj }
            </InspectRecordLayout>
        );
} );

/**安全距离记录 ；报告可打印的 测量：支持更大可能的复用性。 用了Hook就需要正规的React组件模式来做。
 * @param children  直接作为嵌套的组件也能传递过来的。
 * @param label 允许注入任意的DOM节点，不仅是字符串的。
 * */
export const ThicknessVw= ({children, orc, rep,label,nomm } : { orc: any, rep: any,label:any, children?: any,nomm?:boolean}
) => {
    const aveThick=calcAverageArrObj([orc?.力面厚1o,orc?.力面厚2o,orc?.力面厚3o],(row)=>row,2);
    return <>
        <div css={{"@media print": {paddingBottom: '5.5rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h4" css={{marginTop: '1rem',
            }}>{label}</Text>
        </div>
        <Table id={'Thickness'} fixed={ ["6%","%","6%","13%","9%","9%","8.1%"] }
               css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-5.5rem'}} } tight  miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell>序号</CCell>
                    <CCell>检验项目</CCell>
                    <CCell>单位</CCell>
                    <CCell>观测值</CCell>
                    <CCell>平均值</CCell>
                    <CCell>结果值</CCell>
                    <CCell>检验结果</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'Thickness'}>
                    <TableRow>
                        <CCell rowSpan={3}>1</CCell>
                        <CCell rowSpan={3} css={{wordBreak: 'break-all'}}>主要受力结构件断面有效厚度，设计值（{orc.力面厚设}）mm</CCell>
                        <CCell rowSpan={3}>mm</CCell>
                        <CCell>{orc.力面厚1o}</CCell>
                        <CCell rowSpan={3}>{aveThick}</CCell>
                        <CCell rowSpan={3}>{orc.力面厚v}</CCell>
                        <CCell rowSpan={3}>{orc.力面厚r}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>{orc.力面厚2o}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>{orc.力面厚3o}</CCell>
                    </TableRow>
                    {!nomm && <TableRow>
                        <CCell>备注</CCell>
                        <Cell colSpan={6}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                            {orc.力面备注 || '／'}
                        </div></Cell>
                    </TableRow>
                    }
                </RepLink>
            </TableBody>
        </Table>
        { children ? children : tailZj }
    </>;
};
